<template>
    <div>
        <el-container class="common-layout">
            <el-main>
                <div class="divs">
                    <span class="title">
                        <el-icon>
                            <House />
                        </el-icon>
                        运营管理  /签收单  <span style="color: #0098FF;">/签收单详情</span>
                    </span>
                </div>
                <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;基础信息</p>
                <el-form v-model="OrderstavleData" label-width="auto" ref="refform" :rules="result">
                    <div
                        style="background-color: #F5F9FF;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                       <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="订单状态:" prop="Ord_type">
                                    <el-input v-model="OrderstavleData.ord_type" placeholder="请输入内容" clearable
                                        readonly />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="订单号:" prop="Ord_number">
                                    <el-input v-model="OrderstavleData.ord_type" placeholder="请输入内容" clearable
                                        readonly />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="客户:" prop="Client_name">
                                    <el-input v-model="OrderstavleData.client_name" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="运单号:" prop="ord_destination">
                                    <el-input v-model="bm" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8">
                                <el-form-item label="始发地:">
                                    <el-input v-model="OrderstavleData.ord_startaddress" placeholder="请输入内容"
                                        clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="目的地:">
                                    <el-input v-model="OrderstavleData.ord_destination" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="配送方式:">
                                    <el-input v-model="OrderstavleData.ord_type" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="发车时间:">
                                    <el-input v-model="OrderstavleData.tran_type" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="收货地址:">
                                    <el-input v-model="OrderstavleData.cg_type" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <!-- <el-row>
                            <el-col :span="8">
                                <el-form-item label="订单来源:">
                                    <el-input v-model="OrderstavleData.ord_source" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="下单时间:">
                                    <el-date-picker v-model="OrderstavleData.ord_time" type="datetime"
                                        placeholder="请选择时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                        </el-row> -->
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <div class="grid-content ep-bg-purple">
                                    <div class="two">
                                        <span style="color: #fff;">发</span>
                                    </div>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="grid-content ep-bg-purple">
                                    <div class="one">
                                        <span style="color:#fff">收</span>
                                    </div>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="联系人" prop="shipments_Contactname">
                                    <el-input v-model="OrderstavleData.shipments_Contactname" placeholder="请输入内容"
                                        clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="联系人" prop="receiving_Contactname">
                                    <el-input v-model="OrderstavleData.receiving_Contactname" placeholder="请输入内容"
                                        clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="联系电话" prop="shipments_ContactPhone">
                                    <el-input v-model="OrderstavleData.shipments_ContactPhone" placeholder="请输入内容"
                                        clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="联系电话" prop="receiving_ContactPhone">
                                    <el-input v-model="OrderstavleData.receiving_ContactPhone" placeholder="请输入内容"
                                        clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="发货地址" prop="shipments_addres">
                                    <el-input v-model="OrderstavleData.shipments_addres" placeholder="请输入内容"
                                        clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="收货地址" prop="receiving_addres">
                                    <el-input v-model="OrderstavleData.receiving_addres" placeholder="请输入内容"
                                        clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="计划发货时间:">
                                    <el-date-picker v-model="OrderstavleData.shipping_time" type="datetime"
                                        placeholder="请选择时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="计划收货时间:">
                                    <el-date-picker v-model="OrderstavleData.receiving_time" type="datetime"
                                        placeholder="请选择时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;货物明细</p>
                    <div
                        style="background-color: #F5F9FF;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <el-table :data="Cargotabledata">
                                    <el-table-column type="index" label="序号" width="100" />
                                    <el-table-column property="cg_id" label="货物id" width=""
                                        v-if="false"></el-table-column>
                                    <el-table-column property="cg_name" label="货物名称" />
                                    <el-table-column property="cg_num" label="数量">
                                        <!-- <template #default="scope">
                                            <el-input-number v-model="scope.row.num" class="mx-4" :min="1" :max="10"
                                                controls-position="right" @change="Count" />
                                        </template> -->
                                    </el-table-column>
                                    <!-- <el-table-column property="cg_unit" label="单位" /> -->
                                    <el-table-column property="cg_volume" label="体积(m³)" />
                                    <el-table-column property="cg_weight" label="重量(kg)" />
                                    <el-table-column label="操作">
                                        <template #default="scope">
                                            <el-button link type="primary" size="small"
                                                @click="Delete(scope.row.cg_id)">
                                                删除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="24">
                                <span style="margin-left: -30px;">合计</span>
                                <sapn style="margin-left: 800px;">
                                    总数量:{{ OrderstavleData.count }}&nbsp;&nbsp;总体积:{{ OrderstavleData.totalvolume
                                    }}m³&nbsp;&nbsp;总重量:{{
                    OrderstavleData.weight }}kg
                                </sapn>
                            </el-col>
                        </el-row>
                    </div>
                    <p style="padding-right: 1080px;"><strong style="color: #006EFF;">|</strong>&nbsp;&nbsp;签收信息</p>
                    <div
                        style="background-color: #F5F9FF;padding: 10px;text-align: center;border-radius: 10px;width: 1100px;margin-left: 35px;">
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="签收数量:" prop="Sign_num">
                                    <el-input v-model="tableData.sign_num" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="签收类型:">
                                    <el-input v-model="tableData.sign_type" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="签收人:">
                                    <el-input v-model="tableData.sign_by" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="签收人手机号码:">
                                    <el-input v-model="tableData.sign_phone" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row :gutter="20">
                            <el-col :span="8">
                                <el-form-item label="签收人身份证号:" prop="Sign_identy">
                                    <el-input v-model="tableData.sign_identy" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="签收时间:">
                                    <el-input v-model="tableData.sign_time" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                            <el-col :span="8">
                                <el-form-item label="签收备注:">
                                    <el-input v-model="tableData.sign_remark" placeholder="请输入内容" clearable />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </div>
                    <div style="height: 50px;"></div>
                    <div class="button">
                        <el-form-item>
                            <el-button @click="qx">取消</el-button>
                            <el-button type="primary" @click="Save">保存</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { onMounted, ref, reactive } from 'vue'
import axios from 'axios';
import { Upload } from 'element-plus';
import { useRouter, useRoute } from "vue-router";
import $http from '@/axios/base.js';
import router from '@/router';
export default {
    setup() {
        let route = useRoute();
        let id = ref('');   //订单id
        // let OrderstavleData = reactive({
        //     audit_status: 121,
        //     bill_method: 1,
        //     car_long: 1,
        //     car_number: "1",
        //     car_type: 1,
        //     carrier_contact_name: "1",
        //     carrier_name: "1",
        //     carrier_phone: "1",
        //     cg_name: "1",
        //     cg_type: 1,
        //     client_name: "1",
        //     collect: 1,
        //     count: 1,
        //     create_by: "1",
        //     create_time: "2014-02-02T00:00:00",
        //     del_flag: 1,
        //     dis_mode: 1,
        //     driver_name: "1",
        //     driver_phone: "1",
        //     freight_costs: 1,
        //     freight_count: 1,
        //     fuel_costs: null,
        //     handling_fee: 1,
        //     insurance: null,
        //     lastUpdate_by: "2014-02-02",
        //     lastUpdate_time: "2014-02-02T00:00:00",
        //     ord_destination: "1",
        //     ord_id: 3,
        //     ord_number: "1",
        //     ord_remark: "1",
        //     ord_source: "1",
        //     ord_startaddress: "1",
        //     ord_state: 1,
        //     ord_time: "2014-02-02T00:00:00",
        //     ord_type: "1",
        //     other_fee: 1,
        //     packag_fee: 1,
        //     pay_as_you_go: 12,
        //     pay_count: 1,
        //     periodical_payment: 1,
        //     prepayment: 11,
        //     receivables_state: 1,
        //     receiving_ContactPhone: "1",
        //     receiving_Contactname: "1",
        //     receiving_addres: "1",
        //     receiving_time: "2014-02-02T00:00:00",
        //     service_charge: null,
        //     shipments_ContactPhone: "11",
        //     shipments_Contactname: "1",
        //     shipments_addres: "1",
        //     shipping_time: "2014-02-02T00:00:00",
        //     take_orders_time: "2014-02-02T00:00:00",
        //     totalvolume: 1,
        //     tran_type: 1,
        //     transit_fees: null,
        //     vc_length: 0,
        //     vc_model: 0,
        //     weight: 1,
        // });  //订单基本信息
        let OrderstavleData = ref({});
        let ord_number = ref('');  //订单编号
        let Cargotabledata = ref([]);  //货物
        let tableData = ref([]); //签收信息

        onMounted(() => {
            id.value = route.query.id;
            // ord_number.value = route.query.ord_number;
            Cargoshow();
            show();
            //Ordershow()
            Ordershow();
        })

        function Ordershow(){
            $http.get(`http://localhost:5261/api/Signature_receipt/GetOrd_id/${id.value}`).then((res)=>{
                // ord_number.value=res.ord_number;
                console.log(res);
                OrderstavleData.value = res;
            })
        }

        

        function show() {  //查询签收信息
            $http.get(`http://localhost:5261/api/Signature_receipt/GetSign_XQ/${id.value}`).then((res) => {
                tableData.value = res[0];
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

        function Cargoshow() {  //查询货物
            $http.get(`http://localhost:5261/api/Order/GetOrder_Cargos/${id.value}`).then((res) => {
                Cargotabledata.value = res;
                console.log(Cargotabledata.value);
                
            }).catch((err) => {
                console.log("错误:" + err);
            })
        }

        return {
            OrderstavleData,
            ord_number,
            Cargotabledata,
            tableData
        }

    }
}
</script>

<style scoped>
.one {
    width: 40px;
    height: 40px;
    background-color: #2ED477;
    font-size: 25px;
    border-radius: 4px;
    margin-left: 30px;
}

.two {
    width: 40px;
    height: 40px;
    background-color: #FF9138;
    font-size: 25px;
    border-radius: 4px;
    margin-left: 30px;
}

.three {
    margin-left: 1em;
}

.common-layout {
    box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5);
    background-color: #D3DCE6;
    height: 700px;
    width: 1250px;
    margin: auto;
    padding: auto;
    /* margin: 50px; */
    /* display: flex;
    align-items: center; */
}

.title {
    padding-right: 1030px;
    padding-top: 20px;
}

.el-row {
    margin-bottom: 20px;
}

.el-row:last-child {
    margin-bottom: 0;
}

.el-col {
    border-radius: 4px;
}

.grid-content {
    border-radius: 4px;
    min-height: 36px;
    /* background-color: aqua; */
}

.avatar-uploader .el-upload {
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
    border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 100px;
    text-align: center;
}

.avatar-uploader .avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.button {
    padding-right: 37px;
    margin-top: 20px;
    height: 50px;
    position: fixed;
    /* 固定位置 */
    top: auto;
    /* 距离顶部20像素 */
    right: 70px;
    /* 距离右侧20像素 */
    bottom: 20px;
    /* 底部自动 */
    left: auto;
    /* 左侧自动 */
    z-index: 1000;
    /* 确保它在其他内容之上 */

}
</style>